<template>
  <div>
    <div v-if="imageLoading">加载中...</div>
    <el-image
      v-loading="loading"
      fit="fill"
      style="margin: 10px;"
      :src="imageUrl"
    />
  </div>
</template>

<script>
import { handleDiagram } from './api'
export default {
  // 当前页面名称（组件）
  name: 'InstanceDiagram',
  // 引用组件
  components: { },
  directives: { },
  filters: {},
  // props属性 这里只定义了基本的，目的是防止用户传递无效的属性（如错误拼写），其他的el-select的属性会默认继承，用法一样，因为使用v-bind="$attrs"，这个会将非props定义的属性继承过来
  props: {
    param: {
      type: String,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      loading: false,
      processInstId: undefined,
      imageUrl: undefined,
      imageLoading: false
    }
  },
  computed: {},
  watch: {
    param: {
      immediate: true,
      handler(newVal) {
        this.processInstId = newVal
        this.handleDiagram()
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 查看流程图
    async handleDiagram() {
      this.imageLoading = true
      // this.loading = true
      try {
        const res = await handleDiagram(this.processInstId)
        const blob = new Blob([res])
        this.imageUrl = URL.createObjectURL(blob)
      } catch (error) {
        console.error('获取图片失败:', error)
      } finally {
        // this.loading = false
        this.imageLoading = false
      }
    }
  }
}
</script>
